<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>直播</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui2/aui.css" />
    <style>
        body {}
        .blank{
            display: block;
            height:250px;
            background-color: #fff;
        }
        #page1, #page2, #page3{
            position: relative; z-index:1000;
            -webkit-transform: translateX(0%);
            transform: translateX(0%);
            -webkit-transition: all .4s;
            transition: all .4s;
            background-color: #fff;
        }
        #page1.out, #page2.out, #page3.out{
            display:none;
        }
        .summary{
            text-indent: 10px;
        }
        .teacher-class{
            position:relative;
            display: block;
        }
        .teacher-class>span{
            display: block;
            width:180px;
            margin:0 auto;
            margin-top:20px;
            text-align:center;
            font-weight: bold;
            font-size:32px;
            border-bottom:1px solid #CCCCCC;
        }
        .join{
            border:none !important;
            height:80px;
        }
        .aui-list{
            border-top:none;
        }
        .aui-list .aui-list-item:active {
            background-color:#fff;
        }
        .aui-chat{ 
            padding:0.5rem;
        }
        .aui-list .aui-list-item-input{
            width: inherit;
        }
        .judge{
            width:120px !important;
        }
        .aui-list-item-text{
            -webkit-flex:1;
            -webkit-box-flex: 1;
        }
        .aui-list .aui-list-item-right,
        .aui-list-item-title-row em {
            max-width:100%;
        }
        .submit-button{
            padding:0 20px;
            margin-bottom:20px;
        }
        textarea{
            border:1px solid #dddddd;
        }
    </style>
</head>
<body>
    <div id="paper" class="aui-content aui-margin-b-15">
    </div>
    <div class="submit-button">
        <p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" onclick="submit();">提交</div></p>    
    </div>
    
    
    
    <script id="test_judge" type="text/x-dot-template">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-header">判断题</li>
            {{ for(var i = 0;i<it.length;i++){ }}
                {{ if(it[i].type=="1"){ }}
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                        {{=it[i].title}}
                        </div>
                        <div class="aui-list-item-input judge">
                            <label><input class="aui-radio" type="radio" name={{=it[i].id}} checked value="1"> 是</label>
                            <label><input class="aui-radio" type="radio" name={{=it[i].id}} value="2"> 否</label>
                        </div>
                    </div>
                </li>
                {{ }else{ }}
                <div class="aui-card-list">
                    <div class="aui-card-list-content">
                        <img src={{=baseurl+it[i].title}} />
                    </div>
                    <div class="aui-card-list-footer">
                        <label><input class="aui-radio" type="radio" name={{=it[i].id}} checked value="1"> 是</label>
                        <label><input class="aui-radio" type="radio" name={{=it[i].id}} value="2"> 否</label>
                    </div>
                </div>
                {{ } }}
            {{ } }}
        </ul>
    </script>
    <script id="test_choice" type="text/x-dot-template">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-header">选择题</li>
            {{ for(var i = 0;i<it.length;i++){ }}
                {{ if(it[i].type=="1"){ }}
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                            {{=it[i].title}}
                            </div>
                        </div>
                    </li>
                {{ }else{ }}
                    <div class="aui-card-list-content-padded aui-border-b aui-border-t">
                        <div class="aui-card-list-content">
                            <img src={{=baseurl+it[i].title}} />
                        </div>
                    </div>
                {{ } }}
                {{ if(it[i].type_choice=="1") { }}
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-right">
                                <label><input type="radio" class="aui-radio" name={{=it[i].id}} checked value="1">{{=it[i].choice[0]}}</label>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-right">
                                <label><input type="radio" class="aui-radio" name={{=it[i].id}} value="2">{{=it[i].choice[1]}}</label>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-right">
                                <label><input type="radio" class="aui-radio" name={{=it[i].id}} value="3">{{=it[i].choice[2]}}</label>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-right">
                                <label><input type="radio" class="aui-radio" name={{=it[i].id}} value="4">{{=it[i].choice[3]}}</label>
                            </div>
                        </div>
                    </li>
                {{ }else{ }}
                    <div class="aui-card-list-content-padded aui-border-b aui-border-t">
                        <div class="aui-row aui-row-padded">
                            <div class="aui-col-xs-4">
                                <img src={{=baseurl+it[i].choice[0]}} />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src={{=baseurl+it[i].choice[1]}} />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src={{=baseurl+it[i].choice[2]}} />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src={{=baseurl+it[i].choice[3]}} />
                            </div>
                        </div>
                    </div>
                    <div class="aui-card-list-footer">
                        <label><input class="aui-radio" type="radio" name={{=it[i].id}} checked value="1"> A</label>
                        <label><input class="aui-radio" type="radio" name={{=it[i].id}} value="2"> B</label>
                        <label><input class="aui-radio" type="radio" name={{=it[i].id}} value="3"> C</label>
                        <label><input class="aui-radio" type="radio" name={{=it[i].id}} value="4"> D</label>
                    </div>
                {{ } }}
            {{ } }}
        </ul>
    </script>
    <script id="test_question" type="text/x-dot-template">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-header">简答题</li>
            {{ for(var i = 0;i<it.length;i++){ }}
                {{ if(it[i].type=="1"){ }}
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            {{=it[i].title}}
                        </div>
                    </div>
                </li>
                {{ }else{ }}
                <div class="aui-card-list-content-padded aui-border-b aui-border-t">
                     <div class="aui-card-list-content">
                        <img src={{=baseurl+it[i].title}} />
                    </div>
                </div>
                {{ } }}
                <div id={{=it[i].id}}>
                    <div class="aui-card-list-footer">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-input">
                                <textarea placeholder="请输入答案"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="aui-card-list-footer">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                <div class="aui-btn aui-btn-info aui-margin-r-5" tapmode onclick="choosePicture({{=it[i].id}})">上传图片</div>
                            </div>
                            <div class="aui-list-item-input">
                                <img />
                            </div>
                        </div>
                    </div>
                </div>
            {{ } }}
        </ul>
    </script>
</body>
<script src="../../script/doT.min.js"></script>
<script data-main="../../script/main" src="../../script/require.js"></script>
<script type="text/javascript">
    var data;
    var index = 2;
    var rong;
    var extra;//用户信息，附加在每条消息后
    var start_time;
    apiready = function(){
        require(["zepto","common"],function(){
            data = api.pageParam.data;
            token = api.pageParam.info.token;
            course_id = api.pageParam.info.id;
            baseurl = $zb.getRes("/");
            start_time = getCurrentTime();
            makeTest();
        })
    };
    
    function makeTest(){
        $("#paper").html("");
        $("#paper").append(doT.template($("#test_judge").text())(data.test.judgement));
        $("#paper").append(doT.template($("#test_choice").text())(data.test.choice));
        $("#paper").append(doT.template($("#test_question").text())(data.test.question));
        
        $(".aui-card-list-content").find('img').on('click',function(){
         	var src_array =[];
         	src_array.push($(this).attr("src"));
         	openPicture(src_array,0);
        })
        $(".aui-row-padded").on('click',function(){
            var src_array =[];
            $(this).find('img').each(function(){
                src_array.push($(this).attr("src"));
            });
            openPicture(src_array,0);
        });
        $(".aui-col-xs-4").parent().find('img').on('click',function(e){
        	e.stopPropagation();
        	var src_array =[];
        	var current_src = $(this).attr("src");
        	var index = 0;
            $(this).parent().parent().find('img').each(function(indx){
            	if(current_src==$(this).attr("src")){
            		index = indx;
            	}
            	src_array.push($(this).attr("src"));
            })
            openPicture(src_array,index);
        })
    }
    
    function openPicture(src_array,index){
    	api.openWin({
	        name: 'rs_test_picture',
	        url: './rs_test_picture.html',
	        pageParam:{
	        	src_array : src_array,
	        	index : index,
	        },
	        bgColor:'#000'
        });
    }
    
    function choosePicture(id){
        api.actionSheet({
            cancelTitle: '取消',
            buttons: ['选择图片', '拍照']
        }, function(ret, err) {
            var index = ret.buttonIndex;
            if(index==1){
            	getPicture("library",id);
            }else if(index==2){
                getPicture("camera",id);
            }
        });
    }
    
    function getPicture(type,id){
    	api.getPicture({
		    sourceType: type,
		    encodingType: 'jpg',
		    mediaValue: 'pic',
		    destinationType: 'url',
		    allowEdit: true,
		    quality: 100,
		    saveToPhotoAlbum: false
		}, function(ret, err) {
		    if (ret) {
		        $("#"+id).find('img').attr("src",ret.data);
		    }
		});
    }
    
    function submit(){
        var judgement = data.test.judgement;
        var choice = data.test.choice;
        var question = data.test.question;
        var questions = [];
        var files = {};
        for(var item in judgement){
            questions.push({
                question_id : judgement[item].id,
                answer : $("input[name='"+judgement[item].id+"']:checked").val()
            })
        }
        for(var item in choice){
            questions.push({
                question_id : choice[item].id,
                answer : $("input[name='"+choice[item].id+"']:checked").val()
            })
        }
        for(var item in question){
            questions.push({
                question_id : question[item].id,
                answer : $("#"+question[item].id).find('textarea').val()
            })
            files["pic_"+question[item].id] = $("#"+question[item].id).find('img').attr('src');
        }
        var end_time = getCurrentTime();
        var s_data = {
            values:{
                token : token,
                course_id : course_id,
                questions : JSON.stringify(questions),
                start_time : start_time,
                end_time : end_time
            },
            files: files
        }
        api.showProgress();
        $zb.requestForData(s_data,'resources','submitAnswer',function(ret){
            if(ret.status=="OK"){
                api.toast({
	                msg:'提交成功'
                });
                setTimeout(function(){
                    api.closeWin();
                },2000)
            }
        })
    }
    
    function getCurrentTime(){
        var c_time = new Date();
        var yy = c_time.getFullYear();
        var MM = c_time.getMonth() + 1;
        var dd = c_time.getDate();
        var HH = c_time.getHours();
        var mm = c_time.getMinutes();
        var ss = c_time.getSeconds();
        MM = MM<10?("0"+MM):MM;
        dd = dd<10?("0"+dd):dd;
        HH = HH<10?("0"+HH):HH;
        mm = mm<10?("0"+mm):mm;
        ss = ss<10?("0"+ss):ss;
        return yy+"-"+MM+"-"+dd+" "+HH+":"+mm+":"+ss;
    }
</script>
</html>